import 'package:flutter/material.dart';
import '../../manger/user_manger.dart';
import '../../models/serach_info_model.dart';
import '../../manger/cached_image_widget.dart';
import 'package:ninetyfour/l10n/app_localizations.dart';

class ProductTitleView extends StatelessWidget {
  final ReListModel? model;
  final RechargeTypeModel? productModel;
  final String name;

  const ProductTitleView({super.key, this.model, this.productModel, required this.name});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Column(
      children: [
        // Stack 用于将背景图片和头像容器重叠显示
        Stack(
          children: [
            // 背景图片，背景图片固定高度
            Container(
              width: screenWidth,
              height: 183,
              child: Image.asset(
                'assets/images/probg.png',
                fit: BoxFit.cover,
              ),
            ),
            // 头像容器，使用 Align 来覆盖在背景图片上面
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                margin: const EdgeInsets.only(top: 40),
                width: 111,
                height: 111,
                // 不要使用 BoxDecoration 的圆角裁剪
                // 只保留圆形背景和边框效果
                decoration: BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                alignment: Alignment.center,
                child: Stack(
                  clipBehavior: Clip.none, // ✅ 允许子元素超出边界
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(15), // ✅ 仅裁剪头像
                      child: CachedImage(
                        imageUrl: productModel?.pic ?? '',
                        fit: BoxFit.cover,
                        placeholderPath: 'assets/images/placeholderImage.png',
                      ),
                    ),
                    if (productModel?.sellOut == 1)
                      Container(
                        width: double.infinity,
                        height: double.infinity,
                        color: Colors.white.withValues(alpha: 0.6),
                      ),
                    if (productModel?.sellOut == 1)
                      Positioned(
                        right: -20, // ✅ 可超出边界显示
                        bottom: -20,
                        child: Image.asset(
                          isChineseLocale() ? 'assets/images/saveno.png' : 'assets/images/saveno_en.png',
                          width: 90,
                          height: 90,
                        ),
                      ),
                  ],
                ),
              ),
            )

          ],
        ),

        // 底部内容容器
        Container(
          margin: const EdgeInsets.only(top: 0,left: 20,right: 20),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(13),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 上方描述
              _buildTopBanner(context),

              const SizedBox(height: 8),

              // 产品名
              Padding(
                padding: const EdgeInsets.only(left: 15),
                child: Text(
                  "${productModel?.categoryName ?? ''} $name",
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF000000),
                  ),
                ),
              ),
              
              const SizedBox(height: 8),

              // 描述信息
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  productModel?.blurb.isNotEmpty == true ? productModel?.blurb ?? '' : AppLocalizations.of(context)!.blurbNoText,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    color: Color(0xFF757575),
                    fontSize: 12,
                  ),
                ),
              ),

              const SizedBox(height: 15),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildTopBanner(BuildContext context) {
    final token = UserInfos.shared.token;
    if (token.isNotEmpty) {
      return Container(
        height: 34,
        width: double.infinity,
        child: Stack(
          children: [
            Image.asset(
              'assets/images/proimg7.png',
              fit: BoxFit.fill,
              width: double.infinity,
              alignment: Alignment.topCenter,
            ),
            Positioned(
              left: 15,
              top: 3,
              child: Image.asset(
                'assets/images/proimg8.png',
                width: 20,
                height: 20,
              ),
            ),
            Positioned(
              left: 42,
              top: 3,
              child: Text(
                AppLocalizations.of(context)!.detailDesc,
                style: const TextStyle(
                  fontSize: 14,
                  color: Color(0xFFFFFFFF),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      );
    } else {
      return Container(
        height: 34,
        width: double.infinity,
        child: Stack(
          children: [
            Image.asset(
              'assets/images/proimg6.png',
              fit: BoxFit.fill,
              width: double.infinity,
              alignment: Alignment.topCenter,
            ),
            Positioned(
              left: 15,
              top: 4,
              child: Image.asset(
                'assets/images/proimg2.png',
                width: 20,
                height: 20,
              ),
            ),
            Positioned(
              left: 42,
              top: 4,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    AppLocalizations.of(context)!.newPeopleCanOnlyRegister,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFFFFFFFF),
                    ),
                  ),
                  Container(
                    width: 49,
                    height: 19,
                    margin: const EdgeInsets.only(left: 4, top: 2, right: 4),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(9),
                    ),
                    child: const Center(
                      child: Text(
                        r'$186',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFFF40C0C),
                          height: 1.0,
                        ),
                      ),
                    ),
                  ),
                  Text(
                    AppLocalizations.of(context)!.coupon,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFFFFFFFF),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    }
  }
}
